<#noparse>
<template>
    <div class="container">
        <a-table
            :columns="columns"
            :dataSource="dataSource"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
        >
            <template #bodyCell="{ column, record }">
                <template v-if="column.dataIndex === 'action'">
                    <span>
                        <a-button type="link" @click="handleUpdate(record)">修改</a-button>
                        <a-divider type="vertical" />
                        <template v-if="record.preset">
                            <a-tooltip>
                                <template #title>系统预设数据不允许删除</template>
                                <a-button type="link" disabled>删除</a-button>
                            </a-tooltip>
                        </template>
                        <template v-else>
                            <a-popconfirm title="确认删除此条数据？" ok-text="确认" cancel-text="取消" @confirm="handleConfirmDelete(record)">
                                <a-button type="link" class="warning">删除</a-button>
                            </a-popconfirm>
                        </template>
                    </span>
                </template>
            </template>
        </a-table>
    </div>
</template>
</#noparse>

<#noparse>
<script setup lang="ts">
</#noparse>
import { ref, onMounted } from 'vue';
// Api
import Api from '@/axios/api/${obj.relativePath}';
// Component
import { message } from 'ant-design-vue';
import Icon from '@/component/common/Icon.vue';
// Model
import { PageQuery, Pagination, Result } from '@/model/common';
import { ${obj.classPrefix}Query, ${obj.classPrefix}ListDTO } from '@/model/${obj.relativePath}';
// Plugin
import { Bus, BusEvent } from '@/plugin';

const emit = defineEmits(['update']);

const loading = ref(false);
let pageQuery = new PageQuery();
const pagination = ref(Pagination.default);
let query = new ${obj.classPrefix}Query();
const columns = ${obj.classPrefix}ListDTO.columns;
const dataSource = ref${r'<'}${obj.classPrefix}ListDTO[]${r'>'}([]);

onMounted(() => {
    Bus.on(BusEvent.REFRESH_${obj.objectPrefix?upper_case}, (_query: any) => {
        if (_query) {
            query = _query;
        }
        refresh();
    })
});

const refresh = () => {
    loading.value = true;
    Api.pageList(query, pageQuery)
        .then((res: Result) => {
            dataSource.value = res.data.data;
            pagination.value.total = Number(res.data.total);
        })
        .finally(() => {
            loading.value = false;
        });
};

/**
 * 分页参数改变事件
 */
const handleTableChange = (pagination: any) => {
    pageQuery = new PageQuery(pagination.current, pagination.pageSize);
    refresh();
};

/**
 * 点击更新按钮事件
 */
const handleUpdate = (record: ${obj.classPrefix}ListDTO) => {
    emit('update', record);
}

/**
 * 确认删除事件
 */
const handleConfirmDelete = (record: ${obj.classPrefix}ListDTO) => {
    loading.value = true;
    Api.delete(record.${obj.objectPrefix}Id)
        .then(() => {
            message.success('删除成功。')
            refresh();
        })
        .catch((err: Result) => {
            message.error(`删除失败。${r'$'}{err.msg}`);
        })
        .finally(() => {
            loading.value = false;
        });
}

// 定义组件对外暴露的内容
defineExpose({
    refresh
})

<#noparse>
</script>
</#noparse>

<#noparse>
<style lang="less" scoped>
.container {
    .ant-table {
        .ant-btn-link {
            padding: 0;
            height: unset;
            border: unset;

            &.warning {
                color: @warning-color;
            }
        }
    }
}
</style>
</#noparse>
